<template>
    <div class="wrap">
        <image class="title" mode="widthFix" :src="iconInfo.iconText"/>
        <div class="content">
            <image class="content-title" mode="widthFix" :src="iconInfo.iconTitle"/>
            <image
              :src="iconInfo.iconCard"
              mode="widthFix"
              class="content-img"
            />
            <button class="share-btn" open-type="share"></button>
        </div>
        <image class="footer" mode="widthFix" :src="iconInfo.iconFooter"/>
    </div>
</template>
<script>
const iconFooter = require('@static/images/footer.png');
const iconCard = require('@static/images/invite_card.png');
const iconText = require('@static/images/text.png');
const iconTitle = require('@static/images/title.png');
export default {
    data() {
        return {
            iconInfo: {
                iconFooter,
                iconCard,
                iconText,
                iconTitle
            }
        };
    },
    onShareAppMessage: function (res) {
		return {
			title: '斗罗校园',
			path: `/pages/home/main?inviteid=${wx.getStorageSync('memberId')}`,
            imageUrl: 'http://img.douluotianxia.com/img/index.png'
		};
    }
}
</script>
<style lang="scss">
.wrap {
    height: 100%;
    background-image: linear-gradient(0deg, #FF4A2D 0%, #F96A2A 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.title {
    margin: 35px 0px 10px;
}
.content {
    position: relative;
    display: inline-block;
    margin-top: 85px;
    .content-title {
        position: absolute;
        top: -73px;
        left: 0px;
    }
    .content-img {
        position: relative;
        z-index: 2;
    }
    .share-btn {
        width: 297px;
        height: 55px;
        position: absolute;
        z-index: 3;
        background: transparent;
        width: 100%;
        left: 12px;
        bottom: 30px;

    }
}
.footer {
    width: 100%;
    position: absolute;
    left: 0px;
    bottom: 0px;
}
</style>